<template>
  <div class="home">
    <swiper :options="swiperOptions">
     <swiper-slide>
        <img class="w-100" src="..\assets\images\97d2b0ca7af017abb2ef8d55fd86e0b3.jpeg" alt >
      </swiper-slide>
      <swiper-slide>
        <img class="w-100" src="..\assets\images\70b0cee73be9673f1932a8c360806502.jpeg" alt >
      </swiper-slide>
      <swiper-slide>
        <img class="w-100" src="..\assets\images\3a41250e2f7521b865e98b06e0b31a80.png" alt >
      </swiper-slide> 
      <div class="swiper-pagination pagination-home px-3 pb-1" slot="pagination"> </div>
    </swiper>
    <!-- end of swiper -->

    <div class="nav-icons bg-white mt-3 pt-3 text-grey-1 text-center">
      <div class="d-flex flex-wrap">
          <div class="nav-item  mb-3" v-for="n in 10" :key="n">
            <i class="sprite sprite-news"></i>
            <div class="py-2">爆料站</div>
          </div>
      </div>
     <div class="py-2 bg-light fs-sm ">
       <i class="sprite sprite-arrow mr-1"></i>
       <span>收起</span> 
     </div>
    </div>
     <!-- end of nav-icons -->

      <m-list-card icon="sprite-news" title="新闻资讯" :categories="newsCats">
        <template #items="{category}">
          <router-link tag="div" :to="`/articles/${items._id}`" class="py-2 fs-lg d-flex" v-for="(items,i) in category.newsList" :key="i">
            <span class="text-info">[{{items.categoryName}}]</span>
            <span class="px-2">|</span>
            <span class="flex-1 text-dark-1 pr-2 text-overflow">{{items.title}}</span>
            <span class="text-grey-1 fs-sm">{{items.createdAt | date}}</span>
          </router-link>
        </template>
      </m-list-card>
      
      <m-list-card icon="sprite-news" title="英雄列表" :categories="heroCats">
        <template #items="{category}">
          <div class="d-flex flex-wrap" style="margin:0 -0.5rem">
            <router-link tag="div" :to="`hero/${hero._id}`" class="p-2 text-center" style="width:20%;" v-for="(hero,i) in category.heroList" :key="i">
              <img :src="hero.avatar" :alt="hero.name" class="w-100">
              <div>{{hero.name}}</div>
            </router-link>
          </div>
        </template>
      </m-list-card>
       <!-- <m-list-card icon="sprite-news" title="精彩视频"></m-list-card> -->
  </div>
</template>

<script>
import dayjs from 'dayjs'
export default {
  filters:{
    date(val){
      return dayjs(val).format('MM/DD')
    }
  },
  data(){
    return{
      swiperOptions: {
        loop:true,        
        autoplay:{
          delay:2500,
          stopOnLastSlide: false
        },
        pagination: {
          el: '.swiper-pagination'
        },
      },
      newsCats:[],
      heroCats:[]
    }
  },

  methods:{
    async fetchNewsCats(){
     const res =  await this.$http.get('news/list')
     this.newsCats = res.data
    },
    async fetchHeroCats(){
      const res =  await this.$http.get('heroes/list')
      this.heroCats = res.data
    }
  },
  created(){
    this.fetchNewsCats()
    this.fetchHeroCats()
  }
}
</script>

<style lang="scss">
@import '../assets/scss/_variables';
 .pagination-home{
   text-align: right;
   .swiper-pagination-bullet{
     border-radius: 0.1538rem;
     opacity: 1;
     background : map-get($colors, 'white');
     &.swiper-pagination-bullet-active{
       background:map-get($colors, 'info')
     }
   } 
 }
 .nav-icons{
   border-top:1px solid $border-color;
   border-bottom:1px solid $border-color;
   .nav-item{
     width:25%;
     border-right: 1px solid $border-color;
     &:nth-child(4n){
       border: none;
     }
   }
 }

</style>